$grey-text-light: #8e8e8e;
$grey-very-light: #f5f5f5;
$grey-very-light-border: #f2f2f2;
$grey-light-border: #e1e1e1;
$grey-border: #ccc;
$grey-very-light-border: #eee;
$white: #fff;
$black: #000;
$red: #dc3232;
$red-light: #f55e4f;
$color-text-dark-grey: #515151;

$warning-badge-red: #ca4a1f;

$color-brand-paragraph-grey: #69686e;

$color-dark-grey: #464646;
$color-g2-dark-grey: #1e1e1e;


$breakpoint-xlarge: 1450px;

@import "mixins";
@import "loader";
@import "icons";
@import "switch";
@import "actions";
@import "reports";
@import "modal";
@import "tables";
@import "variables";
@import "settings";
@import "admin-menu";
@import "fields";
@import "rules";
@import "workflow-list";
@import "workflow-edit";
@import "dashboard";
@import "welcome-notice";


.automatewoo-notice {
	position: relative;
	transition: opacity 0.2s ease;

	p {
		transition: opacity 0.2s ease;
	}

	&.aw-loading {
		opacity: 0.65;

		p {
			opacity: 0.6;
		}

		@include loader();
	}
}


.automatewoo-upgrade-loader {
	display: inline-block;
	position: relative;
	width: 40px;
	height: 13px;
	opacity: 0.55;

	@include loader( 20px );
}


.automatewoo-info-box {
	background: #e4e4e4;
	padding: 12px 16px 14px;
	border: 1px solid #ccc;
}


dl.automatewoo-meta-data {
	margin: 0;

	@include clearfix();

	dt,
	dd {
		display: inline-block;
		float: left;
		margin: 0 0 0.8em;
		padding: 0;
	}

	dt {
		font-weight: bold;
		clear: left;
		padding-right: 0.5em;
	}

	dd {

		p:last-child {
			margin-bottom: 0;
		}
	}

	a {
		text-decoration: none;
	}
}


body.post-type-aw_workflow #wpbody-content,
.automatewoo-page {

	h1::before {
		content: "";
		display: inline-block;
		width: 27px;
		height: 20px;
		background-image: url("../img/header-badge.svg");
		background-size: contain;
		background-repeat: no-repeat;
		// Modified again in the next rule.
		margin-right: 9px;
		position: relative;
		top: 2px;
	}
}

body.post-type-aw_workflow #wpbody-content h1::before {
	margin-right: 4px;
}

// Smaller icon for AutomateWoo's items in the WooCommerce's Analytics menu.
automatewoo-icon {
	content: "";
	display: inline-block;
	// Use the font size.
	height: 1em;
	// Scale proportionally to font height.
	width: calc(1em * 611 / 439);
	background-image: url("../img/header-badge.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	// Invert the color to make it white.
	filter: invert(100%);
	margin-right: 0.5em;
	vertical-align: text-bottom;
}

#wpbody-content #wp__notice-list + .automatewoo-page:not(.woocommerce) {
	padding-top: 96px;
}

.automatewoo-content {}

.automatewoo-content--has-sidebar {

	@include clearfix;

	@media ( min-width: $breakpoint-xlarge ) {
		$sidebar-width: 250px;
		$gutter: 25px;

		.automatewoo-main {
			float: left;
			width: calc(100% - #{$sidebar-width + $gutter});
		}

		.automatewoo-sidebar {
			float: right;
			margin-top: 42px;
			width: $sidebar-width;
			margin-left: $gutter;
		}
	}
}


.automatewoo-sidebar {
	$color: #959595;

	color: $color;
	border-top: 1px solid #ddd;
	padding: 18px 0 5px;
	margin-top: 13px;

	p {
		margin: 0 0 9px;

		@media ( min-width: $breakpoint-xlarge ) {
			margin: 0 0 13px;
		}

		a {
			color: $color;
		}
	}
}


.automatewoo-arrow-link {
	display: block;
	width: 15px;
	height: 15px;
	border: 2px solid;
	border-radius: 50%;
	text-decoration: none;
	color: #d1d1d1;
	position: relative;

	&::before {

		@include dashicon( "\f345" );
		position: absolute;
		top: 1px;
		left: 2px;
		font-size: 13px;
		-webkit-font-smoothing: subpixel-antialiased;
	}
}


.automatewoo-plugin-table-update-message {
	display: block;
	background: #d54d21;
	color: $white;
	padding: 1em;
	margin: 9px 0;

	a {
		color: $white;
		text-decoration: underline;
	}

	&::before {

		@include dashicon( "\f348" );
		margin: 0 8px 0 -2px;
	}
}


[data-automatewoo-show] {
	display: none;
}


.automatewoo-help-tip {
	font-size: 15px;
	color: #a9a9a9;
}

.automatewoo-help-link--right,
.automatewoo-help-tip--right {
	float: right;
	position: relative;
	right: -2px;
}

.automatewoo-tiptip {
	cursor: help;
}

.automatewoo-help-link {
	color: $grey-text-light;

	&::before {

		@include dashicon( "\f504" );
		font-size: 16px;
	}
}


%automatewoo-badge-in-circle {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	color: $white;

	.dashicons {
		font-size: 12px;
		height: 14px;
		width: 17px;
		margin-top: 3px;
	}
}


.automatewoo-badge {
	margin: 0 6px;

	&--warning {
		color: $warning-badge-red;

		.dashicons {
			font-size: 21px;
		}
	}

	&--blocked-email {

		@extend %automatewoo-badge-in-circle;
		background: $warning-badge-red;


	}
}


.aw_system_check_table {

	td.help {
		position: relative;
	}
}

.aw-hidden {
	display: none !important;
}
